<template>
  <div class="goods-list-page">
    <page-header-wrapper>
      <page-tab-list>
        <div class="table-page-search-box">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="8" :sm="24">
                <a-form-item label="商品名称">
                  <a-input v-model="queryParam.name" placeholder="请输入商品名称" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="商品分类">
                  <a-select v-model="queryParam.cat_id">
                    <a-select-option :value="item.id" v-for="item in catList" :key="item.id"> {{item.name}} </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="">
                  <a-button type="primary" @click="refresh"> 查询 </a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </page-tab-list>
      <a-card :bordered="false">
        <a-space direction="vertical" size="middle">
          <div class="table-operator">
            <a-radio-group :defaultValue="1" v-model="queryParam.status" @change="callback">
              <a-radio-button :value="-1">全部 </a-radio-button>
              <a-radio-button :value="1">上架中 </a-radio-button>
              <a-radio-button :value="0">已下架 </a-radio-button>
            </a-radio-group>
            <div style="float: right; display: inline-block">
              <a-space class="table-operator">
                <a-button type="primary" style="margin-bottom: 0px" @click="onEdit" icon="plus">添加</a-button>
              </a-space>
              <a-space class="table-operator">
                <a-dropdown>
                  <a-menu slot="overlay">
                    <a-menu-item key="1" @click="updateAll('status', 1)">批量上架 </a-menu-item>
                    <a-menu-item key="2" @click="updateAll('status', 0)">批量下架 </a-menu-item>
                    <a-menu-item key="5" @click="updateAll('is_delete', 1)">批量删除</a-menu-item>
                  </a-menu>
                  <a-button> 批量设置 <a-icon type="down" /> </a-button>
                </a-dropdown>
              </a-space>
            </div>
          </div>
          <div class="notice-box" v-if="book_goods_ids.length > 0">
            <a-icon type="exclamation-circle" theme="twoTone" two-tone-color="#f9ad18" />
            请注意：预约商品ID:
            <router-link v-for="(item, index) in book_goods_ids" :key="index" :to="'/goods/edit?id=' + item"
              >{{ item }}
              <template v-if="book_goods_ids.length - 1 != index">,</template>
            </router-link>
            不及时补充日期预约相关数据，将作自动下架处理
          </div>
          <div>
            <!-- 商品列表 -->
            <GoodsTable
              ref="goodsTable"
              :queryParam="queryParam"
              :status="currentTab"
              @onBookGoodsIds="onBookGoodsIds"
            ></GoodsTable>
          </div>
        </a-space>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import { STable } from '@/components'
import { allCatList as catListApi } from '@/api/plugin/integral'
import GoodsTable from './components/GoodsTable.vue'

export default {
  components: {
    STable,
    GoodsTable,
  },
  data() {
    return {
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '上架中',
          value: 1,
        },
        {
          title: '已下架',
          value: 0,
        },
      ],
      currentTab: -1,
      catList: [],
      book_goods_ids: [],
      queryParam: {
        name: '',
        cat_id: '',
        status: -1,
        product_type: '4',
      },
    }
  },
  activated() {
    this.$nextTick(() => {
      this.$refs[this.currentTab].$refs.tableList.refresh(true)
    })
  },
  created() {
    this.getCatList()
  },
  computed: {},
  watch: {
    currentTab(val) {
      this.$nextTick(() => {
        this.refresh()
      })
    },
  },
  methods: {
    onBookGoodsIds(value) {
      console.log(value)
      if (value) {
        this.book_goods_ids = value
      }
    },
    callback(e) {
      console.log(e)
      let value = e.target.value
      this.currentTab = value
      this.queryParam.status = value
    },
    refresh(row) {
      this.$nextTick(() => {
        this.$refs.goodsTable.refresh()
      })
    },
    onEdit(id) {
      this.$router.push({ path: '/plugins/integralStore/addGoods'})
    },
    updateAll(type, status) {
      this.$refs.goodsTable.updateAll(type, status)
    },
    /**
     * 获取分类
     */
    getCatList() {
      catListApi().then((res) => {
        this.catList = res.data.data
      })
    },
    updateParam(value, type) {
      this.queryParam[type] = value
    },
  },
}
</script>
<style lang="less" scoped>
.goods-list-page {
  .ant-space-vertical {
    width: 100%;
  }
  .table-operator {
    margin-bottom: 0;
  }
  .fixPosition {
    display: inline-block;
    transform: translateX(-18px);
    color: transparent;
    cursor: pointer;
  }
  .text_ellipsis {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .table_operator_icon {
    font-size: 18px;
    padding: 0 5px;
    color: rgb(182, 182, 182);
    cursor: pointer;
    &:hover {
      color: rgb(24, 144, 255);
    }
  }
  .permission-form {
    /deep/ .permission-group {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  .search-item {
    margin-left: 10px;
  }
  .min_top_height {
    /deep/.ant-card-body {
      padding-top: 10px;
    }
  }
  .notice-box {
    width: 100%;
    height: 40px;
    background: #fefbe6;
    border: 1px solid #ffe58f;
    display: flex;
    align-items: center;
    padding: 0 16px;
    .anticon {
      margin-right: 5px;
    }
  }
}
</style>
